<template>
  <view class="user">
    <image src="../../static/user/1.png"
           mode="scaleToFill"
           class="bg" />
    <view class="user_header">
      <view class="user_left">
        <image src="https://pockets.qixdian.cn/upload/20240711/668f856808dcd.png"
               mode="scaleToFill"
               class="icon" />
        <view class="user_flex">
          <view class="message">在线开盒</view>
          <view class="line"></view>
          <view class="message">正品保障</view>
          <view class="line"></view>
          <view class="message">100%中奖</view>
        </view>
      </view>
      <view class="user_right">
        <image src="https://pockets.qixdian.cn/upload/20240711/668f856804cba.png"
               mode="scaleToFill"
               class="user_icon" />
        <image src="https://pockets.qixdian.cn/upload/20240711/668f8567eaf89.png"
               mode="scaleToFill"
               class="user_icon"
               @click="setting" />
      </view>
    </view>
    <view class="user_content"
          v-if="token">
      <view class="user_content_top">
        <image :src="userDate.avatar"
               mode="scaleToFill"
               class="avatars" />
        <view class="user_content_top_right">
          <view class="name">{{userDate.nickname}}</view>
          <view class="id">ID:{{userDate.id}}</view>
        </view>
      </view>
      <view class="user_content_bottom">
        <view class="list">
          <view class="total">
            {{ userDate.balance || 0 }}
          </view>
          <view class="title">
            金币
          </view>
        </view>
        <view class="list">
          <view class="total">
            {{ userDate.box_count || 0 }}
          </view>
          <view class="title">
            仓库
          </view>
        </view>
        <view class="list">
          <view class="total">
            {{ userDate.back_card_count || 0 }}
          </view>
          <view class="title">
            反悔卡
          </view>
        </view>
        <!-- <view class="list">
          <view class="total">
            {{ userDate.balance || 0 }}
          </view>
          <view class="title">
            金币
          </view>
        </view> -->
      </view>
    </view>
    <view class="user_content"
          v-else>
      <view class="user_content_top">
        <image src="https://www.qixdian.cn/upload/images/user/avatar.png"
               mode="scaleToFill"
               class="avatars" />
        <view class="user_content_top_right">
          <view class="name"
                @click="login">请点击去登录</view>

        </view>
      </view>

    </view>
    <view class="vip">
      <view class="vip_content">
        <view class="left">
          <image src="https://pockets.qixdian.cn/upload/20240711/668f8567f2b56.png"
                 mode="scaleToFill"
                 class="vip_icon" />
          <view class="vip_num">
            vip{{ userDate.level_id  || '0'}}
          </view>
        </view>
        <view class="right"
              @click="member">
          会员中心
          <image src="https://pockets.qixdian.cn/upload/20240711/668f8567f3c31.png"
                 mode="scaleToFill"
                 class="right_icon" />
        </view>
      </view>
    </view>
    <view class="order">
      <view class="list">
        <image src="https://pockets.qixdian.cn/upload/20240711/668f856800fd6.png"
               mode="widthFix"
               class="order_icon" />
      </view>
      <view class="list">
        <image src="https://pockets.qixdian.cn/upload/20240711/668f8567e762a.png"
               mode="widthFix"
               class="order_icon" />
      </view>
      <view class="list">
        <image src="https://pockets.qixdian.cn/upload/20240711/668f85680d83c.png"
               mode="widthFix"
               class="order_icon" />
      </view>
      <view class="list">
        <image src="https://pockets.qixdian.cn/upload/20240711/668f856802f21.png"
               mode="widthFix"
               class="order_icon" />
      </view>
    </view>
    <view class="sw_box">
      <swiper class="swiper"
              circular
              :indicator-dots="indicatorDots"
              :autoplay="autoplay"
              :interval="interval"
              :duration="duration">
        <swiper-item v-for="(item,index) in swList"
                     :key="index">
          <image :src="item"
                 mode="scaleToFill"></image>
        </swiper-item>
      </swiper>
    </view>
    <view class="tuiguang">
      <view class="box">
        <view>
          <image src="https://pockets.qixdian.cn/upload/20240711/668f8568036e4.png"
                 mode="widthFix"
                 class="icon" />
        </view>
        <view class="bottom">
          推广申请
        </view>
      </view>
      <view class="box">
        <view>
          <image src="https://pockets.qixdian.cn/upload/20240711/668f856804a39.png"
                 mode="widthFix"
                 class="icon" />
        </view>
        <view class="bottom">
          绑定有礼
        </view>
      </view>
      <view class="box">
        <view>
          <image src="https://pockets.qixdian.cn/upload/20240711/668f8567efb59.png"
                 mode="widthFix"
                 class="icon" />
        </view>
        <view class="bottom">
          潮玩红包
        </view>
      </view>
      <view class="box">
        <view>
          <image src="https://pockets.qixdian.cn/upload/20240711/668f856806b7b.png"
                 mode="widthFix"
                 class="icon" />
        </view>
        <view class="bottom">
          赠送记录
        </view>
      </view>
      <view class="box">
        <view>
          <image src="https://pockets.qixdian.cn/upload/20240711/668f85680abe6.png"
                 mode="widthFix"
                 class="icon" />
        </view>
        <view class="bottom">
          商务合作
        </view>
      </view>
      <view class="box">
        <view>
          <image src="https://pockets.qixdian.cn/upload/20240711/668f8567ef243.png"
                 mode="widthFix"
                 class="icon" />
        </view>
        <view class="bottom">
          常见问题
        </view>
      </view>
      <view class="box">
        <view>
          <image src="https://pockets.qixdian.cn/upload/20240711/668f856802ed2.png"
                 mode="widthFix"
                 class="icon" />
        </view>
        <view class="bottom">
          意见反馈
        </view>
      </view>
    </view>
  </view>
</template>
<script>

export default {

  data () {
    return {
      token: '',
      userDate: {

      },
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      swList: [
        "https://pockets.qixdian.cn/upload/20240711/668f85680c077.png",
        "https://pockets.qixdian.cn/upload/20240711/668f85680c077.png"
      ],
    }
  },
  onShow () {
    this.token = uni.getStorageSync('token')
    if (this.token) {
      this.getUser()
      this.userDate.nickname = uni.getStorageSync('nickname')
      this.userDate.avatar = uni.getStorageSync('avatar')
      this.userDate.id = uni.getStorageSync('user_id')
    }

  },
  methods: {
    //   登录
    login () {
      uni.navigateTo({ url: '/userPage/login' })
    },
    // 用户信息
    getUser () {
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      this.$Request.get(this.$api.user.userShow).then((res) => {
        uni.hideLoading()
        if (res.code == 200) {
          this.userDate = res.data
          if (this.userDate) {
            uni.setStorageSync('nickname', this.userDate.nickname)
            uni.setStorageSync('avatar', this.userDate.avatar)
            uni.setStorageSync('user_id', this.userDate.id)
          }
        }
      })
    },
    // 设置
    setting () {
      uni.navigateTo({ url: '/pages/user/setting/setting' })
    },
    // 会员
    member () {
      uni.navigateTo({ url: '/pages/user/member/member' })
    }

  }
}
</script>
<style lang="scss" scoped>
.user {
  width: 100vw;
  min-height: 100vh;
  /* #ifdef APP-PLUS */
  padding: 100rpx 20rpx 0;
  /* #endif */
  /* #ifdef MP-WEIXIN */
  padding: 150rpx 20rpx 0;
  /* #endif */
  box-sizing: border-box;
  position: relative;
  // 轮播
  .sw_box {
    width: 700rpx;
    height: 260rpx;
    margin: 20rpx auto 40rpx;
    // margin-bottom: 40rpx;

    .swiper {
      width: 700rpx;
      height: 260rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .bg {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -111111111;
  }
  .user_header {
    display: flex;
    // align-items: center;
    justify-content: space-between;
    .icon {
      width: 122rpx;
      height: 127rpx;
      margin-right: 20rpx;
    }
    .user_left {
      display: flex;
      //   align-items: center;
    }
    .user_right {
      display: flex;
      align-items: center;
      .user_icon {
        width: 40rpx;
        height: 35rpx;
        margin-right: 20rpx;
      }
    }
    .user_flex {
      display: flex;
      //   align-items: center;
      margin-top: 45rpx;

      .message {
        font-weight: 500;
        font-size: 24rpx;
        color: #cccccc;
        // height: 23rpx;
      }
      .line {
        width: 1rpx;
        height: 24rpx;
        background: #cccccc;
        margin: 8rpx 10rpx 0;
      }
    }
  }
  .user_content {
    margin-top: 10rpx;
    .user_content_top {
      display: flex;
      align-items: center;
      .avatars {
        width: 140rpx;
        height: 140rpx;
        border-radius: 50%;
        margin-right: 30rpx;
      }
      .user_content_top_right {
        .name {
          height: 28rpx;
          font-family: PingFang SC;
          font-size: 36rpx;
          color: #ffffff;
        }
        .id {
          font-size: 26rpx;
          color: #fff;
          opacity: 0.8;
          margin-top: 40rpx;
        }
      }
    }
    .user_content_bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .list {
        width: 24%;
        text-align: center;
        margin-top: 50rpx;
        .total {
          font-size: 36rpx;
          color: #fff;
        }
        .title {
          font-size: 24rpx;
          color: #fff;
          opacity: 0.6;
          margin-top: 10rpx;
        }
      }
    }
  }
  .vip {
    margin-top: 50rpx;
    .vip_content {
      margin: auto;
      width: 660rpx;
      height: 66rpx;
      background: url("https://pockets.qixdian.cn/upload/20240711/668f8567e9f59.png")
        no-repeat center center;
      background-size: cover;
      display: flex;
      align-items: center;
      padding: 0 30rpx;
      box-sizing: border-box;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
      }
      .vip_icon {
        width: 36rpx;
        height: 33rpx;
        margin-right: 10rpx;
      }
      .vip_num {
        font-size: 32rpx;
        color: #dca677;
      }
      .right {
        font-size: 32rpx;
        color: #dca677;
        .right_icon {
          width: 14rpx;
          height: 24rpx;
          margin-left: 10rpx;
        }
      }
    }
  }
  .order {
    width: 100%;
    // height: 200rpx;
    background: url("https://pockets.qixdian.cn/upload/20240711/668f8567e7616.png")
      no-repeat;
    padding: 28rpx 33rpx;
    box-sizing: border-box;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .list {
      .order_icon {
        width: 128rpx;
        height: 132rpx;
      }
    }
  }
  .tuiguang {
    width: 100%;
    // height: 300rpx;
    background: url("https://pockets.qixdian.cn/upload/20240305/65e691a0148f0.png")
      no-repeat;
    background-size: 100% 100%;
    display: flex;
    padding: 50rpx 0 0;
    box-sizing: border-box;
    // justify-content: space-between;
    flex-wrap: wrap;
    .box {
      width: 25%;
      margin-bottom: 50rpx;
      text-align: center;
      .icon {
        width: 50rpx;
      }
      .bottom {
        font-weight: bold;
        font-size: 24rpx;
        color: #ffffff;
        margin-top: 10rpx;
      }
    }
  }
}
</style>
